<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script src="../../dist/mermaid.js"></script>
    <script>
        var config = {
            startOnLoad:false,
            callback:function(id){
                console.log(id,' rendered');
            },
            flowchart:{
                    useMaxWidth:true,
                    htmlLabels:true
                }
        };
        mermaid.initialize(config);
    </script>
    <script>
        function coolAction(){
            console.log('Got callback in user defined function');
        }
    </script>
    <style>
        .cluster {
            fill: #fcac93;
            rx:4px;
            stroke: grey;
        }
    </style>
    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
    <body>
    <h1>Issue 211</h1>
    A should have a red background.
    <div class="mermaid" id="i211">

        graph LR;
        A-->B[AAA<span>BBB</span>];
        B-->D;
        classDef test fill:#FF0000,stroke:#FFFF00,stroke-width:4px;
        class A test;
    </div>

    </body>
</html>
